<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="h-[1000px]">
    <div class="text-center">{{ title }}</div>
    <el-select
      v-model="activeKey"
      class="mt-5"
      clearable
      filterable
      placeholder="请选择"
    >
      <el-option
        v-for="item in data"
        :key="item.key"
        :disabled="item.disabled"
        :label="item.label"
        :value="item.key"
      />
    </el-select>
    <Conversations
      v-model:active="activeKey"
      :items="data"
      :load-more="loadMoreItems"
      :show-to-top-btn="true"
      :show-tooltip="true"
      :tooltip-offset="35"
      groupable
      row-key="key"
      show-built-in-menu
      tooltip-placement="right"
      @change="handleChange"
    >
      <template #label="{ item }">
        <!-- 文字省略 -->
        <div class="text-ellipsis">
          <span>{{ item.label }}</span>
        </div>
        <!-- 消息提示 -->
        <span v-if="item.messageCount > 0" class="message-count msg-bounce">
          <el-badge :value="item.messageCount" />
        </span>
      </template>
      <template
        #more-filled="{ item, isHovered, isActive, isMenuOpened, isDisabled }"
      >
        <!-- 菜单按钮 -->
        <slot
          :is-active="isActive"
          :is-disabled="isDisabled"
          :is-hovered="isHovered"
          :is-menu-opened="isMenuOpened"
          :item="item"
          name="more-filled"
        >
          <div></div>
        </slot>
      </template>
      <!-- 自定义选择菜单栏 -->
      <template #menu="{ item }">
        <slot :item="item" name="menu">
          <div></div>
        </slot>
      </template>
    </Conversations>
  </div>
</template>

<script setup lang="ts">
import type { ConversationItem } from 'vue-element-plus-x/types/Conversations';

import type { MyAgentListType } from '#/api/agent/model/listModel';

import { Conversations } from 'vue-element-plus-x';

import { useConversations } from '#/hooks/useconversations';

// 定义 emit 类型
interface Emit {
  (e: 'itemselect', data?: any): void;
}
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  // 是否加载更多数据
  isLoadMoredata: {
    type: Boolean,
    default: false,
  },
  request: {
    type: Function as PropType<(...args: any) => Promise<any>>,
    required: true,
  },
});
// 创建 emit 函数
const emit = defineEmits<Emit>();
const activeKey = defineModel<number>('activeKey'); // 选择项
const isLoading = ref(false);
// 类型
interface MenuTestItemsType extends MyAgentListType {
  key: number;
  label: string;
  messageCount: number;
  [key: string]: any;
}
// 选中每一项事件
const handleChange = (item: ConversationItem<MenuTestItemsType>) => {
  emit('itemselect', item);
};
/**
 * @todo 未定义加载动画isLoading属性
 */
const { data, loadMoreItems, refresh, addTopData } = useConversations({
  isLoading,
  request: props.request,
  isLoadMoredata: props.isLoadMoredata,
});
defineExpose({
  refresh,
  addTopData,
});
</script>

<style scoped lang="scss">
// 激动动画
@keyframes bounce {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(0);
  }

  75% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}
// 消息跳动
.msg-bounce {
  animation: bounce 2s ease-in-out infinite;
}

/* 文字省略样式 */
.text-ellipsis {
  display: -webkit-box;
  align-items: center;
  width: 100%;
  overflow: hidden; /* 隐藏溢出部分的文本 */
  line-height: 20px; /* 设置行高，使得文本在垂直方向上居中 */
  text-overflow: ellipsis; /* 显示省略号以指示被修剪的文本 */
  -webkit-line-clamp: 1; /* 显示的行数，根据需要调整 */
  word-wrap: break-word; /* 强制换行 */
  -webkit-box-orient: vertical;
}

// 菜单栏样式
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 12px;

  // 自定义菜单按钮-el-button样式
  .el-button {
    padding: 4px 8px;
    margin-left: 0;

    .el-icon {
      margin-right: 8px;
    }
  }
}
// 消息数量提示样式
.message-count {
  position: absolute;
  top: 10%;
  right: 0%;
}

//取消框架隐藏样式
:deep() .conversation-content .conversation-content-main {
  overflow: visible !important;
}
// 列表每项边框调整
:deep() .conversation-item {
  border-bottom: 1px solid rgb(234 231 231) !important;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

:deep() .conversations-container .conversations-list {
  color: var(--background-deep);
  background-color: var(--background-deep-color-plus) !important;
}

:deep().conversation-item :hover {
  color: black;
}
</style>
